<template>
  <div class="IndexPage">
    <!-- 顶部轮播 -->
    <div ref="mySwiper" class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="@/assets/index/banner/1.png" />
        </div>
        <div class="swiper-slide">
          <img src="@/assets/index/banner/2.png" />
        </div>
        <div class="swiper-slide">
          <img src="@/assets/index/banner/3.png" />
        </div>
      </div>
      <!-- <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>-->
      <!-- <div class="swiper-pagination"></div> -->
    </div>

    <!-- 轮播遮罩 -->
    <div class="mask">
      <div class="t1">为用户提供更加完善货运服务</div>
      <div class="t2">打造集信息发布、运输、交易、管理、结算、税务筹划等功能为一体的特色数智货运平台</div>
    </div>

    <!-- 联运模式 -->
    <div class="mode">
      <div class="t1">“互联网+物流”新型多式联运模式</div>
      <div class="t2">借助互联网的优势，为需要提供供应链物流服务的主题提供一站式货运服务</div>
      <div class="list">
        <ModeCard v-for="(item,index) in modeList" :key="index" :list="item" />
      </div>
    </div>

    <!-- 特色服务 -->
    <div class="service">
      <div class="area">
        <div class="t1">我们的特色服务</div>
        <div class="list">
          <ServiceCard v-for="(item,index) in serviceList" :key="index" :list="item" />
        </div>
      </div>
    </div>

    <!-- 多级管理 -->
    <div class="manage">
      <div class="left">
        <img class="img" src="@/assets/index/manage/1.jpg" alt />
      </div>
      <div class="right">
        <div class="t1">多级管理</div>
        <div class="t2">满足总公司、分公司、分支网点三级网点业务管理需求，满足多税源地管控的需要</div>
        <div class="content">
          <div class="item" v-for="(item,index) in manageList" :key="index">
            <div class="d1">{{item.title}}</div>
            <div class="d2">{{item.desc}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="bottom">
      <div class="main">
        <div class="left item">
          <div class="title">导航</div>
          <div class="content">
            <ul>
              <li>行业动态</li>
              <li>货源信息</li>
              <li>运力信息</li>
              <li>关于我们</li>
              <li>业务统计</li>
            </ul>
          </div>
        </div>
        <div class="center item">
          <div class="title">联系方式</div>
          <div class="content">
            <ul>
              <li>
                <img class="img" src="@/assets/index/bottom/phone.png" alt />
                <div class="t1">手机：16627270980</div>
              </li>
              <li>
                <img class="img" src="@/assets/index/bottom/call.png" alt />
                <div class="t1">电话：0372-5656616</div>
              </li>
              <li>
                <img class="img" src="@/assets/index/bottom/email.png" alt />
                <div class="t1">网址：http://www.zhgylgl.com/</div>
              </li>
              <li>
                <img class="img" src="@/assets/index/bottom/adress.png" alt />
                <div class="t1">地址：河南省安阳市殷都区钢一路与TX29路交叉口</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="right item">
          <div class="app item">
            <div class="title">APP下载</div>
            <img class="img" src="@/assets/index/bottom/app.jpg" alt />
          </div>
          <div class="wechat item">
            <div class="title">公众号</div>
            <img class="img" src="@/assets/index/bottom/wechat.jpg" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper/bundle";
import ModeCard from "./components/ModeCard";
import ServiceCard from "./components/ServiceCard";
export default {
  name: "IndexPage",
  components: {
    ModeCard,
    ServiceCard
  },
  data() {
    return {
      swiper: null,
      modeList: [
        {
          url: require("@/assets/index/mode/1.jpg"),
          title: "司机管理",
          desc:
            "身份认证；车辆认证；电子钱包；账单；运单轨迹抢单；定向单；任务管理；商城；分账管理；电子钱包；支付管理。"
        },
        {
          url: require("@/assets/index/mode/2.jpg"),
          title: "车辆管理",
          desc:
            "司机管理；车辆管理；找货；订单管理；运单管理；承运回单管理；异常处理；派车被拒管理；我的竞价。"
        },
        {
          url: require("@/assets/index/mode/3.jpg"),
          title: "货主管理",
          desc:
            "承运方管理；子账号管理；货物管理；联系单位管理发货；订单管理；运单管理；发货回单管理；开票申请。"
        }
      ],
      serviceList: [
        {
          url: require("@/assets/index/service/1.svg"),
          title: "专业化运力",
          desc:
            "平台挑选信誉好、效率高的运力，指定派单，保证货主流转效率和货物安全，提升运力效率。"
        },
        {
          url: require("@/assets/index/service/2.svg"),
          title: "GPS实时监控",
          desc: "实时监控车辆位置，确保运输路程无忧。"
        },
        {
          url: require("@/assets/index/service/3.svg"),
          title: "信誉结算系统",
          desc: "优质信誉货主，提供优先垫付服务。"
        },
        {
          url: require("@/assets/index/service/4.svg"),
          title: "资金安全保障",
          desc:
            "平台信誉担保，确保司机资金到位。同时，金税四期上线之后，对纳税人的监控可做到“四全”，即全方位、全业务、全流程、全智能，助力解决票务税务合规。"
        }
      ],
      manageList: [
        {
          title: "数据分离",
          desc: "各级数据隔离，独立开展业务"
        },
        {
          title: "数据切换",
          desc: "基础数据共享，业务数据可按照需要随时切换承载主体"
        },
        {
          title: "四流合一",
          desc: "各级数据业务流，资金流，税务流，合同流四流合一"
        },
        {
          title: "接口独立",
          desc: "接口可按分支结构单独配置，保证跨省业务正常开展"
        }
      ]
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      this.swiper = new Swiper(".mySwiper", {
        speed: 600,
        loop: true,
        effect: "fade",
        fadeEffect: {
          crossFade: true
        },
        autoplay: true
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true
        // }
      });
      window.addEventListener("resize", () => {
        //页面尺寸变化更新swiper尺寸
        this.swiper && this.swiper.updateSize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.IndexPage {
  position: relative;
  .mySwiper {
    height: 720px;
  }
  .mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 720px;
    background: #00000059;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .t1 {
      color: #fff;
      font-weight: 600;
      font-size: 55px;
      margin-bottom: 20px;
    }
    .t2 {
      color: #fff;
      font-size: 22px;
    }
    @media screen and (max-width: 767px) {
      text-align: center;
    }
  }
  .mode {
    box-sizing: border-box;
    width: 80%;
    margin: 0 auto;
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .t1 {
      font-size: 40px;
      font-weight: 300;
    }
    .t2 {
      font-size: 20px;
      margin-top: 20px;
      margin-bottom: 40px;
    }
    .list {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    @media screen and (max-width: 767px) {
      width: 100%;
      padding: 10px;
      text-align: center;
      .t1 {
        font-size: 40px;
      }
      .t2 {
        font-size: 20px;
      }
      .list {
        flex-direction: column;
        padding: 10px;
        box-sizing: border;
        align-items: center;
      }
    }
  }
  .service {
    background: #eeeeee;
    padding: 100px 0;
    .area {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      .t1 {
        font-size: 40px;
        font-weight: 300;
        margin-bottom: 50px;
      }
      .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }
    }
    @media screen and (max-width: 767px) {
      .area{
        width: 100%;
      }
      .list{
        box-sizing: border-box;
        flex-direction: column;
        padding: 10px;
        align-items: center;
      }
    }
  }
  .manage {
    display: flex;
    padding: 100px 0;
    .left {
      height: 80%;
      width: 50%;
      margin-right: 10%;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      padding: 40px 0;
      .t1 {
        margin-bottom: 16px;
        font-family: Open Sans;
        font-weight: 300;
        font-size: 2.625em;
        line-height: 1.143;
        color: rgb(51, 51, 51);
      }
      .t2 {
        margin-bottom: 16px;
        font-family: Open Sans;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.6;
        color: rgb(153, 153, 153);
      }
      .content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        .item {
          width: 48%;
          height: 100px;
          margin-bottom: 20px;
          .d1 {
            margin-bottom: 16px;
            font-family: Open Sans;
            font-weight: 600;
            font-size: 1.125em;
            line-height: 1.55;
            color: rgb(51, 51, 51);
          }
          .d2 {
            margin-bottom: 16px;
            font-family: Open Sans;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.6;
            color: rgb(153, 153, 153);
          }
        }
      }
    }
    @media screen and (max-width: 767px) {
      text-align: center;
      flex-direction: column;
      padding: 10px;
      box-sizing: border-box;
      .left{
        width: 100%;
        .img{
          width:100%;
        }
      }
    }
  }
  .bottom {
    background: #333;
    color: #fff;
    padding: 100px 0;
    .main {
      display: flex;
      width: 60%;
      margin: 0 auto;
      .title {
        margin-bottom: 16px;
        font-family: Open Sans;
        font-weight: 600;
        font-size: 1em;
        line-height: 1.6;
        position: relative;
        &::after {
          content: "";
          width: 15px;
          height: 2px;
          background: #fff;
          position: absolute;
          left: 0;
          bottom: -10px;
        }
      }

      .left {
        width: 30%;
        ul {
          margin-top: 40px;
          list-style: none;
          display: flex;
          flex-direction: column;
          li {
            margin: 10px 0;
            cursor: pointer;
          }
        }
      }
      .center {
        width: 40%;
        ul {
          margin-top: 40px;
          list-style: none;
          display: flex;
          flex-direction: column;
          li {
            margin: 14px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            .img {
              width: 20px;
              margin-right: 5px;
            }
          }
        }
      }
      .right {
        width: 30%;
        display: flex;
        .item {
          margin-right: 50px;
          .img {
            width: 150px;
            margin-top: 20px;
          }
        }
      }
    }
    @media screen and (max-width: 767px) {
      padding: 20px 0;
      // text-wrap: nowrap;
      .main{
        width: 90%;
        flex-direction: column;
        font-size: 16px;
        .item{
          width: 100%;
          margin-top: 40px;
          .item{
            margin-top: 0px;
          }
        }
  
      }

    }
  }
}
</style>
